<template>
  <div class="main_content AddOrEditPersonal">
    <father-title :title="fatherTitle"></father-title>
    <div class="contentBox">
      <!-- <header-line :title="headerTitle"></header-line> -->
      <div class="middleBox">
        <search-box @clickSearch="search">
          <template slot="left">
            <Input
              v-model="searchParams.name"
              placeholder="停车位"
              clearable
            ></Input>
            <Input
              v-model="searchParams.locaiton"
              placeholder="业主"
              clearable
            ></Input>
          </template>

          <template slot="right">
            <Button
              v-if="$store.state.perms.includes('sys:schedule:save')"
              type="primary"
              @click="addData"
              >新增</Button
            >
          </template>
        </search-box>
        <v-table
          :loading="pageConfig.loading"
          ref="selection"
          border
          :columns="columns"
          :data="list"
        >
          <template slot-scope="{ row }" slot="status">
            <span>{{
              status.find((item) => item.value === row.status).key
            }}</span>
          </template>
          <template slot-scope="{ row }" slot="operation">
            <Button
              v-if="$store.state.perms.includes('sys:role:update')"
              type="primary"
              size="small"
              @click="editData(row)"
              >编辑</Button
            >
            <Button
              v-if="$store.state.perms.includes('sys:role:delete')"
              class="button_spacing"
              type="error"
              size="small"
              @click="stopUse(row)"
              >停用</Button
            >
          </template>
        </v-table>
        <v-page :pageConfig="pageConfig" @refresh="getList"></v-page>
      </div>

      <AddOrEditModal
        v-model="modalCTL.show"
        :title="modalCTL.title"
        :loading="modalCTL.loading"
        width="50%"
        @on-ok="save"
      >
        <Form
          ref="form"
          :model="formValidate"
          :rules="ruleValidate"
          label-position="left"
          :label-width="100"
          slot="content"
        >
          <FormItem label="车位楼层" prop="newPassword">
            <Input
              type="text"
              v-model="formValidate.newPassword"
              placeholder="请输入车位楼层"
            />
          </FormItem>
          <FormItem label="车位编号" prop="confirmPassword">
            <Input
              type="text"
              v-model="formValidate.confirmPassword"
              placeholder="请输入车位编号"
            />
          </FormItem>
          <FormItem label="车位照片" prop="confirmPassword">
            <Input
              type="text"
              v-model="formValidate.confirmPassword"
              placeholder="请输入停车费用"
            />
          </FormItem>
          <FormItem label="业主姓名" prop="confirmPassword">
            <Input
              type="text"
              v-model="formValidate.confirmPassword"
              placeholder="请输入业主姓名"
            />
          </FormItem>
          <FormItem label="业主电话" prop="confirmPassword">
            <Input
              type="text"
              v-model="formValidate.confirmPassword"
              placeholder="请输入业主电话"
            />
          </FormItem>
          <FormItem label="业主身份证" prop="confirmPassword">
            <Input
              type="text"
              v-model="formValidate.confirmPassword"
              placeholder="请输入业主身份证"
            />
          </FormItem>
          <FormItem label="身份证信息" prop="confirmPassword">
            <!-- <div
              class="demo-upload-list"
              v-for="(item, index) in uploadList"
              :key="index"
            >
              <template v-if="item.status === 'finished'">
                <Image :src="item.url" fit="cover" width="100%" height="100%" />
                <div class="demo-upload-list-cover">
                  <Icon
                    type="ios-eye-outline"
                    @click="handleView(item.name)"
                  ></Icon>
                  <Icon
                    type="ios-trash-outline"
                    @click="handleRemove(item)"
                  ></Icon>
                </div>
              </template>
              <template v-else>
                <Progress
                  v-if="item.showProgress"
                  :percent="item.percentage"
                  hide-info
                ></Progress>
              </template>
            </div> -->
            <Upload
              ref="upload"
              :show-upload-list="false"
              :default-file-list="defaultList"
              :on-success="handleSuccess"
              :format="['jpg', 'jpeg', 'png']"
              :max-size="2048"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :before-upload="handleBeforeUpload"
              multiple
              type="drag"
              action="//jsonplaceholder.typicode.com/posts/"
              style="display: inline-block;width:58px;"
            >
              <div style="width: 58px;height:58px;line-height: 58px;">
                <Icon type="ios-camera" size="20"></Icon>
              </div>
            </Upload>
           
          </FormItem>
          <FormItem label="产权证" prop="confirmPassword">
            <!-- <div
              class="demo-upload-list"
              v-for="(item, index) in uploadList"
              :key="index"
            >
              <template v-if="item.status === 'finished'">
                <Image :src="item.url" fit="cover" width="100%" height="100%" />
                <div class="demo-upload-list-cover">
                  <Icon
                    type="ios-eye-outline"
                    @click="handleView(item.name)"
                  ></Icon>
                  <Icon
                    type="ios-trash-outline"
                    @click="handleRemove(item)"
                  ></Icon>
                </div>
              </template>
              <template v-else>
                <Progress
                  v-if="item.showProgress"
                  :percent="item.percentage"
                  hide-info
                ></Progress>
              </template>
            </div> -->
            <Upload
              ref="upload"
              :show-upload-list="false"
              :default-file-list="defaultList"
              :on-success="handleSuccess"
              :format="['jpg', 'jpeg', 'png']"
              :max-size="2048"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :before-upload="handleBeforeUpload"
              multiple
              type="drag"
              action="//jsonplaceholder.typicode.com/posts/"
              style="display: inline-block;width:58px;"
            >
              <div style="width: 58px;height:58px;line-height: 58px;">
                <Icon type="ios-camera" size="20"></Icon>
              </div>
            </Upload>
           
          </FormItem>
        </Form>
      </AddOrEditModal>
    </div>
  </div>
</template>

<script>
import {
  columns,
  pageConfig,
  formValidate,
  ruleValidate,
  status,
} from "./pageConfig";
export default {
  name: "ParkingLot",

  data() {
    return {
      fatherTitle: "车位信息",
      modalCTL: {
        show: false,
        loading: true,
        title: "车位详情",
      },
      columns,
      pageConfig,
      formValidate: { ...formValidate },
      ruleValidate,
      status,
      list: [],
      searchParams: {
        spaceName:'',
        parkingId:'',
        userId:''
      },
      defaultList: [
        {
          name: "image-demo-1.jpg",
          url: "https://file.iviewui.com/images/image-demo-1.jpg",
        },
        {
          name: "image-demo-2.jpg",
          url: "https://file.iviewui.com/images/image-demo-2.jpg",
        },
      ],
      imgName: "",
      visible: false,
      uploadList: [],
      // search
    };
  },

  mounted() {
    // this.uploadList = this.$refs.upload.fileList;
    this.getList(this.pageConfig)
  },

  computed: {},

  methods: {
    search() {},
    addData() {
      this.modalCTL.show = true;
    },
    editData(row) {},
    stopUse(row) {},
    getList(page) {
      this.pageConfig.loading = true;
      this.$api
        .post("sp/own/parking/space/queryPage", {
          params: {
            page: page.pageNow,
            limit: page.pageSize,
            ...this.searchParams,
          },
        })
        .then((res) => {
          if (res.data.code === 0) {
            this.list = res.data.page.list;
            this.pageConfig.total = res.data.page.totalCount;
          }
        })
        .finally(() => {
          this.pageConfig.loading = false;
        });
    },
    save() {},
    handleView(name) {
      this.imgName = name;
      this.visible = true;
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    handleSuccess(res, file) {
      file.url = "https://file.iviewui.com/images/image-demo-3.jpg";
      file.name = "image-demo-3.jpg";
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "The file format is incorrect",
        desc:
          "File format of " +
          file.name +
          " is incorrect, please select jpg or png.",
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "Exceeding file size limit",
        desc: "File  " + file.name + " is too large, no more than 2M.",
      });
    },
    handleBeforeUpload() {
      const check = this.uploadList.length < 5;
      if (!check) {
        this.$Notice.warning({
          title: "Up to five pictures can be uploaded.",
        });
      }
      return check;
    },
  },
};
</script>

<style scoped lang="less">
.flexOut {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  /deep/ .ivu-form-item-content {
    display: flex;
    margin-left: 0 !important;

    span {
      width: 50px;
      flex-shrink: 0;
      display: inline-block;
      margin-left: 10px !important;
    }
    .icons {
      margin-right: 10px;
    }
  }
}

.AddOrEditPersonal {
  .contentBox {
    overflow-y: scroll;
  }
  .form {
    display: flex;
    flex-direction: column;
    width: 800px;
    padding: 20px;
    flex: 1;
  }
}
</style>
